var $addressBtn;
var $orderBtn;
var _addressContainer;
var _productList;
var _totalContainer;
var $total;
var user;


function init() {
    $addressBtn = $('#addressBtn');
    $orderBtn = $('#orderBtn');
    _addressContainer = $('.address-container');
    _productList = $('.product-list');
    _totalContainer = $('.total-container');
    $total = $('#total');
    user = JSON.parse($.cookie("user"));

}

function initView() {

    var orderInfo;
    mui.ajax($.constant.webRoot() + 'v1/cart/orders', {
        dataType: 'json',
        type: 'GET',
        async: false,
        success: function (response) {
            if (response.code === 200) {
                orderInfo = response.data;
            }
        }
    });
    if (!orderInfo || !orderInfo.productList || orderInfo.productList.length == 0) {
        mui.alert('您的購物車還沒有選購寶貝呢', '提示', function () {
            mui.back();
            mui.openWindow('../cart/index.html', 'id');
        });
        return;
    }

    var defaultAddress = orderInfo.address;
    _addressContainer.find('.name').text(defaultAddress.receiveName);
    _addressContainer.find('.phone').text(defaultAddress.receivePhone);
    _addressContainer.find('.address').text(defaultAddress.receiveAddress);
    $.each(orderInfo.productList, function (i, item) {
        var productItem = getProductItem(item);
        _productList.append(productItem);
    });
    _totalContainer.find('.product-price').text('NT$ ' + orderInfo.productPrice);
    _totalContainer.find('.postage-price').text('NT$ ' + orderInfo.postagePrice);
    _totalContainer.find('.insurance-price').text('NT$ ' + orderInfo.insurancePrice);
    _totalContainer.find('.cash-back-price').text('NT$ ' + orderInfo.cashBackPrice);
    _totalContainer.find('.coupons-price').text('NT$ ' + orderInfo.couponsPrice);

    $total.text(orderInfo.total);

    $addressBtn.bind('tap', function () {
        mui.openWindow('../address/index.html', 'id');
    });

    $orderBtn.bind('tap', function () {

        mui.ajax($.constant.webRoot() + 'v1/cart/orders', {
            dataType: 'json',
            type: 'POST',
            async: false,
            success: function (response) {
                if (response.code === 200) {
                    var totalPrice = response.data.totalPrice;
                    mui.alert('到付 NT$' + totalPrice, '下單成功', function () {
                        mui.back();
                        mui.openWindow('../home/index.html', 'id');
                    });
                }
            }
        });
    });
}

function getProductItem(data) {
    var $productItem = $('<div class="product-item" ></div>');
    var $first = $('<div style="margin-bottom: .5rem"><img src="../../img/logo.png" style="height: .5rem; float: left"/><span style="font-size: .35rem; line-height: .5rem; display: block; float: left; margin-left: .15rem">傾城</span><div style="clear: both"></div></div>');
    var $second = $('<div style="margin-bottom: .5rem"><img src="' + data.coverPicture + '" style="height: 2.5rem; float: left"/><div style="margin-left: 2.85rem;"><div style="font-size: .3rem">' + data.name + '</div><div style="font-size: .3rem; color: #9b9b9b;">' + data.title + '</div><div style="margin-top: .2rem"><div style="float: left; color: red">NT$' + data.price + '</div><div style="float: right; font-size: .3rem"> x ' + data.num + '</div><div style="clear: both"></div></div></div></div>');
    var $third = $('<div style="margin-bottom: .5rem"><div style="font-weight: bold; float: left; width: 2.5rem; text-align: right; font-size: .35rem">服務</div><div style="font-size: .35rem; color: #9b9b9b; margin-left: 2.85rem;">此商品支持7天退貨</div><div style="clear: both"></div></div>');
    var $fourth = $('<div style="margin-bottom: .5rem"><div style="font-weight: bold; float: left; width: 2.5rem; text-align: right; font-size: .35rem">配送方式</div><div style="font-size: .35rem; color: #9b9b9b; margin-left: 2.85rem;">普通配送</div><div style="clear: both"></div></div>');
    var $fifth = $('<div style="margin-bottom: .5rem"><div style="font-weight: bold; float: left; width: 2.5rem; text-align: right; font-size: .35rem">留言</div><div style="font-size: .35rem; color: #9b9b9b; margin-left: 2.85rem;">建議留言前與商家溝通確認</div><div style="clear: both"></div></div>');

    $productItem.append($first, $second, $third, $fourth, $fifth);

    return $productItem;


}

$(function () {
    init();
    initView();
});